<template>
    <div>
        <el-row class="line-row">
            <el-dropdown @command="handleCommand" class="seleceZone">
                <span class="el-dropdown-link">
                    {{activeZone.zoneName}}<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item v-for="(val,index) in dataList" :key="index" :command="val">{{val.zoneName}}</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
         
            <el-upload
                        class="upload-xlsx"
                        :action="'/api'+uploadUrl"
                        :show-file-list="false"
                        accept=".xlsx"
                        :on-success="handleXlsx"
                        :data="formDataXlsx"
                        >
                <el-button size="small" type="primary">文件导入</el-button>
            </el-upload>
        </el-row>
            <div class="tabpane">
                <!--<ul class="ulBox">
                    <li class="tabItem" v-for="(val,index) in dataTypeList" :key="index" @click="handleClick(val,index)" :class="currt==index?'activeItem':''">
                        {{val}}
                    </li>
                </ul> -->
                <el-tabs type="border-card">
                    <el-tab-pane label="消息中心">
                         <el-row>
                            <div class="content-box">
                                <addrsspage/>
                            </div>
                        </el-row>
                    </el-tab-pane>
                </el-tabs>
            </div>
        
    </div>
</template>

<script>
import { listZone} from "@/api/project/project";
import { getToken } from "@/utils/auth";
export default {
    name: 'proupload',
    props:{
        formData:{},
    },
    components: { 
            addrsspage:() => import('./page/addressPage')
    },
    data() {
        return {
            //场地列表
            dataList:[],
            //选中的测区
            activeZone:{},
            //项目列表请求参数
            queryParams:{
                pageNum: 1,
                pageSize: 10,
                zoneName: undefined
            },
            //当前数据类型
            activeName:"",
            //点击标签
            currt:0,
            //数据上传种类
            dataTypeList:["地块位置","历史信息","生产活动","点位信息","钻孔信息","监测井信息","采样信息","分析结果","地块储罐","排污信息","环境信息"],
            //上传请求头
            headers:{'GeomativeAuthorization':'Geomative ' + getToken()},
            //上传地址
            uploadUrl:"/v1/AnalysisInfo/SoilController/GetExcelResult",
            //上传参数
            formDataXlsx:{
                zoneId:null
            },
             //文件上传成功
            handleXlsx(response){
                debugger
                if(response.code!=200){
                    this.msgError("导入失败,"+response.msg);
                }
                else{
                    this.msgSuccess("导入成功");
                    this.dataTypeList = response.result
                }
            },
       };
    },
    mounted() {
    },
    watch:{
        formData(){
            this.getZoneList();
        }
    },
    methods: {
        //获取分区列表
        getZoneList() {
            const queryId = this.formData.projectId;
            this.queryParams.projectId = queryId;
            listZone(this.queryParams).then(
                response => {
                    this.dataList = response.data.records;
                    this.activeZone= this.dataList[0]
                }
            );
        },
        //选中测区
        handleCommand(val){
            this.activeZone= val
            this.formDataXlsx.zoneId = val.zoneId
        },
        //tab点击
        handleClick(val,index){
            this.currt=index
            console.log(val)
        }
    },
};
</script>

<style lang="scss" scoped>
.line-row{
    display: flex;
    justify-items:space-between ;
    align-items: center;
    margin-bottom: 10px;
    /deep/ .el-tabs__nav-wrap::after{
        display: none;
    }
}
  .el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
  .seleceZone{
    //   display: inline-block;
      padding: 0px 20px;
  }
.content-box{
      min-height: calc(100vh - 248px) ;
}
.upload-xlsx{
    display: inline-block;
    margin-left: 50px;
}
</style>